<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07-文本输入组件</title>
    <script src="../js/vue.js"></script>
    <script src="../js/jquery-3.6.0.js"></script>
    <script src="../element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
</head>
<body>
<!--1. 准备一个容器-->
<div id="app">
    用户名:<el-input type="text" prefix-icon="el-icon-user" name="uname" placeholder="请输入用户名" v-model="uname" ></el-input>
   <el-input type="text" suffix-icon="el-icon-user" name="uname" placeholder="请输入用户名" v-model="uname" ></el-input>
    <el-input type="text" prefix-icon="el-icon-news" name="emil" placeholder="请输入邮箱" v-model="emil" >
    <template slot="append">
        qq.com
    </template>
    </el-input>

    <el-input type="text"  name="href" placeholder="请输入邮箱" v-model="href" >
        <template slot="prepend">
            https://
        </template>

        <el-button slot="append">跳转</el-button>
    </el-input>

</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            uname:undefined,
            emil:undefined,
            href:undefined,
        },
        methods: {},
    });
</script>

</body>
</html>